<!-- 我的收藏 -->
<template>
  <div class="my-collection">
    <div class="header">
      <div>
        <el-button type="text" icon="el-icon-arrow-left" style="color: #F4A780; font-size: 16px" @click="goBack">
          <span>我的收藏</span>
        </el-button>
      </div>
      <div class="right">
        <el-button type="text" icon="el-icon-more"></el-button>
        <el-button type="text" icon="el-icon-s-help"></el-button>
      </div>
    </div>
    <div class="switch">
      <el-switch v-model="showHiddenInfo" inactive-text="隐藏下架信息" @change="changeState"></el-switch>
    </div>
    <div  v-infinite-scroll="load"
          :infinite-scroll-disabled="noMore" style="overflow: auto;">
      <div class="item" v-for="item in collectionList" @click="viewDetails(item)">
        <div v-if="item.imagesUrl !== undefined">
          <div class="item-header">
            <span class="title">{{ item.title }}</span>
            <span class="price">￥{{ item.rent }}/月</span>
            <span class="area">{{ item.location }}</span>
          </div>
          <div class="item-content">
            <div class="image-container">
              <img :src="item.imagesUrl[0]" alt="" class="image">
              <img :src="item.imagesUrl[1]" alt="" class="image">
            </div>
            <div class="info-container">
              <el-icon class="icon"><i class="el-icon-flag"></i></el-icon>
              <span class="publish-date">{{ item.createTime }}</span>
              <el-icon class="icon"><i class="el-icon-view"></i></el-icon>
              <span class="views">已浏览{{ item.viewCount }}次</span>
            </div>
          </div>
        </div>
        <div v-else class="house-demand-card">
          <div class="header">
            <img :src="user.photo" style="width: 40px; height: 40px; border-radius: 50%">
            <div class="user-info">
              <p style="font-size: 15px; color: #F4A780; text-align: left">{{ user.nickName }}</p>
              <p style="font-size: 12px; color: gray">{{ item.createTime }}</p>
            </div>
            <p class="location" style="color: #F4A780; font-size: 14px;">{{ item.location }}</p>
          </div>
          <div class="content">
            <p class="renterRequire">{{ item.renterRequire }}</p>
          </div>
        </div>


      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      showHiddenInfo: true,
      page: 1,
      size: 10,
      total: 0,
      questForm: {
        page: 1,
        size: 10,
        state: 1
      },
      collectionList: []
    }
  },
  computed: {
    noMore() {
      return  this.collectionList.length >= this.total
    }
  },
  methods: {
    getUserInfo(){
      this.axios.get('http://localhost:9701/web/userInfo/getUserInfo').then(res => {
        this.user = res.data.data;
      })
    },
    viewDetails(val) {
      if (val.updateTime === undefined) {
        this.$router.push({
          name: 'subletHouse',
          path: '/subletHouse',
          query: {
            id: val.id
          }
        })
      } else {
        this.$router.push({
          name: 'rentalHouse',
          path: '/rentalHouse',
          query: {
            id: val.id
          }
        })
      }
    },
    load() {
      this.page++
      setTimeout(() => {
        if (this.noMore) {
          this.page--
          return
        }
        this.questForm = {
          page: this.page,
          size: this.size,
          state: this.showHiddenInfo ? 1 : 0
        }
        this.axios.post('http://localhost:9701/web/userInfo/getCollectInfo', this.questForm).then(res => {
          if (res.data.code === 200) {
            this.total = res.data.data.total;
            res.data.data.records.forEach(item => {
              item = JSON.parse(item);
              if (item.imagesUrl !== undefined) {
                item.imagesUrl = item.imagesUrl.split(",");
              }
              this.collectionList.push(item);
            })
          } else {
            this.$message.error(res.data.message);
          }
        })
      }, 3000)
    },
    changeState() {
      this.collectionList = [];
      if (!this.showHiddenInfo) {
        this.questForm = {
          page: 1,
          size: 10,
          state: 0
        }
      } else {
        this.questForm = {
          page: 1,
          size: 10,
          state: 1
        }
      }
      this.getCollectionList()
    },
    getCollectionList() {
      this.axios.post("http://localhost:9701/web/userInfo/getCollectInfo", this.questForm)
        .then(res => {
          this.collectionList = [];
          if (res.data.code === 200) {
            this.total = res.data.data.total;
            res.data.data.records.forEach(item => {
              item = JSON.parse(item);
              if (item.imagesUrl !== undefined) {
                item.imagesUrl = item.imagesUrl.split(",");
              }
              this.collectionList.push(item);
            })
          } else {
            this.$message.error(res.data.message);
          }
        })
    },
    goBack() {
      this.$router.go(-1);
    }
  },
  created() {
    this.getCollectionList()
    this.getUserInfo();
  }
}
</script>

<style scoped>
.renterRequire{
  text-align: left;
  margin-left: 10px;
}
.switch{
  padding-top: 15px;
  border-top: 1px solid #F4A780;
  text-align: right;
}
.my-collection {
  width: 390px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
}

.right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}

.item {
  border: 1px solid #eee;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: 15px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.price {
  color: red;
}

.area {
  color: #999;
}

.image-container {
  position: relative;
  display: flex;
}

.image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.detail-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.info-container {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 5px;
}
</style>